<script>
  export default {
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: '',
        // 操作类型[true-修改 false-添加]
        optType: undefined,
        // 部门与角色关联对象
        deptRole: {
          // 主键
          id: undefined,
          // 部门主键
          deptId: undefined,
          // 角色主键
          roleId: undefined,
          // 使用范围[0-本部门 1所有子部门]
          useRange: undefined,
          // 是否领导专属[0-是 1-否]
          useLeader: undefined,
        },
        // 部门与角色关联规则校验对象
        deptRoleRules: {
          roleId: [
            { required: true, message: '请选择角色', trigger: 'change' }
          ],
          useRange: [
            { required: true, message: '请选择使用范围', trigger: 'change' }
          ],
          useLeader: [
            { required: true, message: '请选择是否领导专属', trigger: 'change' }
          ]
        },
        // 角色列表
        roleList: [],
        // 使用范围枚举列表
        useRangeList: [
          {
            name: '本部门',
            value: 0
          },
          {
            name: '所有子部门',
            value: 1
          }
        ],
        // 是否领导专属枚举列表
        useLeaderList: [
          {
            name: '是',
            value: 0
          },
          {
            name: '否',
            value: 1
          }
        ],
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
      }
    },
    computed: {

    },
    methods: {
      /**
       * 打开弹出框方法
       * @param {Object}  deptRole 部门与角色关联对象
       * @param {Boolean} optType  操作类型
       */
      openDialog(deptRole, optType) {
        this.visible = true;
        this.title = optType ? '修改部门关联角色' : '新增部门关联角色';
        this.optType = optType;

        const _deptRole = this.deptRole;
        for (let propKey in _deptRole) {
          if (deptRole.hasOwnProperty(propKey)) {
            _deptRole[propKey] = deptRole[propKey];
          }
        }
        this.getRoleList();
      },
      /**
       * 关闭弹出框方法
       * @param {boolean | function} bool 是否刷新父级组件数据
       */
      closeDialog(bool) {
        this.$nextTick(() => {
          this.visible = false;
        });
        // 重置表单对象
        this.$refs.deptRole.resetFields();
        // 清空部门与角色关联对象
        const deptRole = this.deptRole;
        deptRole.id = undefined;
        deptRole.deptId = undefined;

        this.roleList = [];
        if (typeof bool === 'function') {
          bool = false;
        }
        if (bool) {
          this.$emit('refresh');
        }
      },
      /**
       * 获取角色列表方法
       */
      getRoleList() {
        this.$axios.$get('/sys/role/list')
          .then(({ data }) => {
            this.roleList = data;
          })
          .catch(() => {});
      },
      /**
       * 提交事件
       */
      submitHandle() {
        if (this.optType) {
          this.updateHandle();
        } else {
          this.saveHandle();
        }
      },
      /**
       * 保存事件
       */
      saveHandle() {
        this.$refs.deptRole.validate()
          .then(() => {
            this.buttonLoad = true;

            return this.$axios.$post('/sys/dept-role/save', this.deptRole)
          })
          .then(() => {
            this.notify('success', '提示', '添加部门关联角色成功');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      },
      /**
       * 修改事件
       */
      updateHandle() {
        this.$refs.deptRole.validate()
          .then(() => {
            this.buttonLoad = true;

            return this.$axios.$post('/sys/dept-role/update', this.deptRole)
          })
          .then(() => {
            this.notify('success', '提示', '修改部门关联角色成功');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      }

    }
  }
</script>

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="35%"
    top="13vh"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    class="dept-role-dialog"
  >
    <el-form :model="deptRole" :rules="deptRoleRules" ref="deptRole" size="small"
             @keyup.enter.native="submitHandle" label-width="85px">
      <el-form-item label="角色" prop="roleId">
        <el-select v-model="deptRole.roleId" clearable filterable placeholder="请选择角色" class="width95percent">
          <el-option v-for="role in roleList" :key="'role' + role.roleId"
                     :label="role.roleName" :value="role.roleId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用范围" prop="useRange">
        <el-radio-group v-model="deptRole.useRange">
          <el-radio v-for="useRange in useRangeList" :key="'useRange' + useRange.value" border
                    :label="useRange.value">{{ useRange.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="领导专属" prop="useLeader">
        <el-radio-group v-model="deptRole.useLeader">
          <el-radio v-for="useLeader in useLeaderList" :key="'useLeader' + useLeader.value" border
                    :label="useLeader.value">{{ useLeader.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog(false)">取消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary" @click="updateHandle">修改</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>
  .dept-role-dialog >>> .el-dialog__body {
    padding: 20px;
  }
</style>

<style scoped>
  .dept-role-dialog .width95percent {
    width: 95%;
  }
</style>
